<template>
  <div>
    <!-- 搜索部分需要提出-->
    <div class="col-sm-8 col-xs-12 col-sm-offset-2 col-lg-6 col-lg-offset-3 Rd-coListArea">
      <div class="Rd-input">
        <input type="text" placeholder="输入学校名称（中 / 英 / 缩写）" id="searchCo" v-model.trim="searchkey">
        <span class="label label-info hidden-xs Rd-school">手续费 ￥80-200</span>
        <span class="label label-info hidden-xs Rd-rent hidden">手续费 ￥80起</span>
      </div>
      <div class="Rd-go">
        <a href="javascript:;" class="btn hidden-xs">开始缴费</a>
        <a href="javascript:;" class="Rd-right btn visible-xs"><i class="et_iconfont">&#xe66d;</i></a>
      </div>
      <div class="Rd-quick hidden-xs">
        <a href="javascript:;" data-mode="school" class="btn Rd-school Rd-order hidden">交学费</a>
        <a href="javascript:;" data-mode="rent" class="btn Rd-order Rd-rent hidden">交房租</a>
      </div>
      <div class="hold50"></div>
      <!-- <div class="Rd-partition">
        <div class="Rd-alert"><i class="et_iconfont">&#xe629;</i>&nbsp;<span>您当前有 1 笔订单正在进行</span><a href="#">点击查看</a></div>
      </div> -->
      <div class="Rd-note hidden-xs">
        <span class="Rd-school">缴纳学费、住宿费、报名费、押金、餐费等到海外院校</span>
        <span class="Rd-rent hidden">缴纳校外房租到经纪公司</span>
      </div>
      <div class="Rd-coList" v-show="schoolLength">
        <div class="Rd-coList-items" v-for="item of list" :key="item.id">
          <router-link :to="{path:'/order',query:{'college_code':item.id}}" class="Rd-coList-item">
            <div class="Rd-flag"><span class="cy">
              <img :src="'https://img.easytransfer.cn/img/main/flag/'+item.code+'.jpg'" alt="" v-if="item.code">
            </span></div>
            <p class="Rd-school"><span class="en">{{item.school_en}}</span><span class="ab">{{item.school_ab}}</span></p>
            <p class="Rd-school"><span class="zh">{{item.school_zh}}</span></p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Search",
  data () {
    return {
      searchkey: "",
      list: [],
      timer:null
    };
  },
  watch: {
    searchkey () {
      if(this.timer){
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if(this.searchkey){
          this.seachschool()
        }else{
          this.list = []
        }
      },500)
    }
  },
  computed: {
    schoolLength () {
      return this.list.length
    },
  },
  methods: {
    seachschool() {
      axios.get("/static/json/school.json", {
          params: { search_key: this.searchkey }
        })
        .then(this.getSchoolInfo);
    },
    getSchoolInfo(res) {
      res = res.data
      if(res.data){
        this.list = res.data
      }
    }
  }
};
</script>

<style>
</style>
